<template>
  <div class="content-extract-container">
    <h2>提交 URL 和 Realm</h2>

    <el-form :model="formData" label-width="120px" @submit.prevent="submitForm" style="max-width: 500px;">
      <el-form-item label="URL">
        <el-input v-model="formData.url" placeholder="请输入 URL" />
      </el-form-item>
      <el-form-item label="Realm">
        <el-input v-model="formData.realm" placeholder="请输入 Realm" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit" :loading="loading">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import { pyPostRequest } from '../utils/request';

const loading = ref(false);
const formData = ref({
  url: '',
  realm: ''
});

const submitForm = async () => {
  if (!formData.value.url || !formData.value.realm) {
    alert('请填写所有字段');
    return;
  }

  loading.value = true;

  try {
    const response = await pyPostRequest('/curlWeb/submit', formData.value);
    console.log('接口响应:', response);
    alert('提交成功！');
  } catch (error) {
    console.error('请求失败:', error);
    alert(`提交失败: ${error.message}`);
  } finally {
    loading.value = false;
  }
};

const resetForm = () => {
  formData.value = {
    url: '',
    realm: ''
  };
};
</script>

<style scoped>
.content-extract-container {
  padding: 40px;
  max-width: 600px;
  margin: 0 auto;
}
</style>